import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { useRequest, useSize, useEventEmitter } from 'ahooks'
import { useRef, useState } from 'react'
import { Pie, Column } from '@ant-design/plots'
import { ProjectListTem, PieTemplate, singularColumnTemplate, PieCharts } from '../Template'
import { project } from '../../../../Common/Data'
import { Http } from '../../../../Common/Api'
const { imageUrl } = project[window.location.hostname]

const ColorA01 = ['rgba(109, 255, 209, 1)', 'rgba(59, 171, 233, 1)', 'rgba(182, 238, 255, 1)', 'rgba(229, 125, 221, 1)']
const ColorA02 = ['rgba(143, 237, 125, 1)', 'rgba(116, 179, 255, 1)', 'rgba(233, 116, 255, 1)']
const ColorA03 = 'rgba(57, 225, 195, 1)'
const ColorA04 = ['rgba(143, 237, 125, 1)', 'rgba(116, 179, 255, 1)', 'rgba(233, 116, 255, 1)']

export const TwoA01 = () => {
    const ChartBox = useRef()
    const size = useSize(ChartBox)

    const [DataA01, setDataA01] = useState()
    const [DataA02, setDataA02] = useState()
    const [DataA04, setDataA04] = useState()

    const [ChartA01, setChartA01] = useState()
    const [ChartA02, setChartA02] = useState()
    const [ChartA03, setChartA03] = useState()
    const [ChartA04, setChartA04] = useState()

    const ListA01 = [
        { uuid: 1, label: '在册员工', value: 'A01' },
        { uuid: 2, label: '劳务派遣', value: 'A02' },
        { uuid: 4, label: '临时工', value: 'A03' },
        { uuid: 3, label: '劳务作业', value: 'A04' },
    ]
    const ListA02 = [
        { uuid: 1, label: '大专及以下', value: 'A01' },
        { uuid: 2, label: '本科', value: 'A02' },
        { uuid: 3, label: '硕士', value: 'A03' },
    ]
    const ListA04 = [
        { uuid: 1, label: '一级建造师', value: 'A01' },
        { uuid: 2, label: '二级建造师', value: 'A02' },
        { uuid: 3, label: '其他', value: 'A03' },
    ]

    const { runAsync: A01run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            let charts = []
            const uuidMapping = {
                '9144691c-a87d-40e5-9a33-946fb0bc4001': 'A01',
                '9144691c-a87d-40e5-9a33-946fb0bc4002': 'A02',
                '9144691c-a87d-40e5-9a33-946fb0bc4003': 'A03',
                '9144691c-a87d-40e5-9a33-946fb0bc4004': 'A04',
            }
            res.list.forEach(({ uuid, tableName, personCount }) => {
                const attribute = uuidMapping[uuid]
                if (attribute) {
                    data[attribute] = personCount
                    charts.push({ type: tableName, value: personCount })
                }
            })
            setChartA01(charts)
            setDataA01(data)
        },
    })
    const { runAsync: A02run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            let charts = []
            const uuidMapping = {
                '47f400cf-eed2-4770-9d46-dc0fb5606ba4': 'A01',
                'fd72b5eb-729b-44c8-8ff1-3fc80474401e': 'A02',
                '462f3f4d-b1ab-4547-b7be-13352e20c8b9': 'A03',
            }
            res.list.forEach(({ uuid, tableName, personCount }) => {
                const attribute = uuidMapping[uuid]
                if (attribute) {
                    data[attribute] = personCount
                    charts.push({ type: tableName, value: personCount })
                }
            })
            setChartA02(charts)
            setDataA02(data)
        },
    })
    const { runAsync: A03run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const data = res.list.map(({ uuid, tableName, personCount }) => ({
                uuid,
                label: tableName,
                人: personCount,
            }))
            setChartA03(data)
        },
    })
    const { runAsync: A04run } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            let charts = []
            const uuidMapping = {
                'f199f437-48f9-4e48-9a89-45d767e50838': 'A01',
                '1fecbf7e-8a0b-4ec4-9bcb-26053737b148': 'A02',
                '07f38841-da12-4952-86d0-b606fc1a371a': 'A03',
            }
            res.list.forEach(({ uuid, tableName, personCount }) => {
                const attribute = uuidMapping[uuid]
                if (attribute) {
                    data[attribute] = personCount
                    charts.push({ type: tableName, value: personCount })
                }
            })
            console.log(charts)
            setChartA04(charts)
            setDataA04(data)
        },
    })

    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        MapClickEvent.emit({ uuid: val, type: 'Supervise' })
    })

    const MapClickEvent = useEventEmitter()
    MapClickEvent.useSubscription(val => {
        if (val.type === 'Supervise') {
            const { uuid: organizationUuid } = val
            A01run({ url: 'getGJPersonCategory', data: { organizationUuid } })
            A02run({ url: 'getGJPersonAcademicQualification', data: { organizationUuid } })
            A03run({ url: 'getGJPersonJobTitle', data: { organizationUuid } })
            A04run({ url: 'getGJPersonCert', data: { organizationUuid } })
        }
    })

    return (
        <>
            <div className="left">
                <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            </div>
            <div className="right">
                <div className="Top">
                    <CommonSmallTitle title="人员统计" flex={782} style={{ marginRight: 16 }}>
                        <div className="A01">
                            <div>
                                {ChartA01 && (
                                    <Pie
                                        {...PieTemplate({
                                            data: ChartA01,
                                            color: ColorA01,
                                            size: 240,
                                        })}
                                    />
                                )}
                            </div>
                            <div className="list">
                                {ListA01.map(({ uuid, label, value }, index) => (
                                    <div key={uuid}>
                                        <div style={{ color: ColorA01[index] }}>{label}</div>
                                        <div>{DataA01 && DataA01[value]}</div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle>
                    <CommonSmallTitle title="学历情况" flex={458}>
                        <div className="A02">
                            <div className="Chart">
                                {ChartA02 && (
                                    <Pie
                                        {...PieTemplate({
                                            data: ChartA02,
                                            color: ColorA02,
                                            size: 240,
                                        })}
                                    />
                                )}
                            </div>
                            <div className="list">
                                {ListA02.map(({ uuid, label, value }, index) => (
                                    <div key={uuid}>
                                        <div style={{ color: ColorA02[index] }}>{label}</div>
                                        <div>{DataA02 && DataA02[value]}</div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle>
                </div>
                <div className="Btm">
                    <CommonSmallTitle title="职称情况" flex={674} style={{ marginRight: 16 }}>
                        <div className="A03" ref={ChartBox}>
                            {size && ChartA03 && (
                                <Column
                                    {...singularColumnTemplate({
                                        size: size,
                                        data: ChartA03,
                                        color: ColorA03,
                                        isGroup: true,
                                        yField: '人',
                                    })}
                                />
                            )}
                        </div>
                    </CommonSmallTitle>
                    <CommonSmallTitle title="持证情况" flex={564}>
                        <div className="A04">
                            <div className="Chart">
                                <div>
                                    <img src={imageUrl + 'TwoA04.png'} alt="" />
                                    {ChartA04 && (
                                        <Pie
                                            {...PieCharts({
                                                size: 150,
                                                data: ChartA04,
                                                color: ColorA04,
                                                CS: true,
                                            })}
                                        />
                                    )}
                                </div>
                            </div>
                            <div className="list">
                                {ListA04.map(({ uuid, label, value }, index) => (
                                    <div key={uuid}>
                                        <div style={{ color: ColorA04[index] }}>{label}</div>
                                        <div>{DataA04 && DataA04[value]}</div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </CommonSmallTitle>
                </div>
            </div>
        </>
    )
}
